<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Function start</title>
    <style>
        .msgBox {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 242px;
            background: #eee;
        }

        .msgBox p {
            line-height: 1.5;
            padding: 10px 20px;
            color: #333;
            padding-left: 82px;
            background-position: 25px center;
            background-repeat: no-repeat;
        }

        .msgBox button {
            background: none;
            border: none;
            position: absolute;
            top: 0;
            right: 0;
            font-size: 1.1rem;
            color: #aaa;
        }
    </style>
</head>

<body>
    <button>Display message box</button>

    <script>
        var btn = document.querySelector('button');
        btn.onclick = function(){
            displayMessage('Woo, this is a diffetent Message!', 'chat');
        };
        function displayMessage(msgText, msgType) {
            var html = document.querySelector('html');

            var panel = document.createElement('div');
            panel.setAttribute('class', 'msgBox');
            html.appendChild(panel);

            var msg = document.createElement('p');
            msg.textContent = msgText;
            panel.appendChild(msg);

            var closeBtn = document.createElement('button');
            closeBtn.textContent = 'x';
            panel.appendChild(closeBtn);

            closeBtn.onclick = function(){
                panel.parentNode.removeChild(panel);
            }

            if(msgType ==='warning'){
                msg.style.backgroundImage = 'url(icons/warning.png)';
                panel.style.backgroundColor = 'red';
                panel.style.color = 'white';
            } else if(msgType === 'chat'){
                msg.style.backgroundImage = 'url(icons/chat.png)';
                panel.style.backgroundColor = 'aqua';
            } else {
                msg.style.paddingLeft = '20px';
            }
        }

        
    </script>
</body>

</html>